<template>
	<div style="display: flex;">
		<!-- https://upload-z2.qiniup.com -->
		<div>
			<el-upload ref="upload" :auto-upload="false" :before-upload="uploadBefore" :data="imgData" :limit="5"
				:on-change="uploadChange" :on-preview="onPreviewImage" :on-exceed="uploadExceed"
				:on-remove="uploadRemove" :on-success="uploadSuccess" action="https://upload-z2.qiniup.com"
				list-type="picture-card" multiple>
				<el-button size="small" type="primary">选择图片</el-button>
			</el-upload>
		</div>
		<el-dialog v-model="previewBigImage" width="70%">
			<div style="text-align: center">
				<el-image fill style="max-width: 100%; height: 500px;" :src="dialogImageUrl"></el-image>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import md5 from 'blueimp-md5'

	export default {
		data() {
			return {
				// 上传人脸
				imageList: [],
				imgData: {
					key: '',
					token: ''
				},
				fileList: [],
				fileName: '',
				suffix: '',
				qiniuaddr: "https://tu.fengniaotuangou.cn", // 七牛云图片外链地址
				screenSaverList: this.images, // 上传屏保,

				// 查看图片
				previewBigImage: false,
				dialogImageUrl: ''
			}
		},
		props: ['images'],
		watch: {
			images(val) {
				this.screenSaverList = val;
			}
		},
		mounted() {
			this.getQiniuToken();
		},
		methods: {
			// 移除照片
			uploadRemove(file, fileList) {
				fileList = [];
				console.log(file, fileList)
			},
			// 改变图片
			uploadChange(file, fileList) {
				console.log(file, fileList)
				let self = this;
				fileList.map(item => {
					if (item.name.substring(item.name.lastIndexOf('.') + 1) === 'png' || (item.name.substring(item
							.name.lastIndexOf('.') + 1) === 'jpg')) {
						console.log('图片合格')
					} else {
						self.$message.error('该图片类型错误,请上传后缀为png或jpg格式的图片');
						fileList.pop(item);
						return false;
					}
				});
			},
			// 上传之前
			uploadBefore(file, fileList) {
				console.log(fileList)
				let self = this;
				self.getQiniuToken();
				self.fileName = md5(JSON.stringify(file)).substring(md5(JSON.stringify(file)).length-16);
				self.suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
				self.imgData.key = `${self.fileName}.${self.suffix}`;

				// 上传之前后,把图片推进screenSaverList
				let _screenSaverList = [];
				if (self.imgData.key) {
					_screenSaverList.push(`${self.qiniuaddr}/${self.imgData.key}`)
					_screenSaverList.map(item => {
						if (self.screenSaverList.indexOf(item) === -1 && (item.substring(
								item.lastIndexOf('.') + 1) === 'png' || (item.substring(
								item.lastIndexOf('.') + 1) === 'jpg'))) {
							self.screenSaverList.push(item)
						}
					});
					self.$emit('getImages', {
						imagesList: self.screenSaverList
					});
				}
			},

			uploadSuccess(res, file) {
				console.log(res, file)
				let self = this;
				self.getQiniuToken();
			},

			// 只能上传一个
			uploadExceed() {
				let self = this;
				self.$message.error('最多只能上传5张图片');
			},

			onPreviewImage(fileList) {
				let self = this;
				self.previewBigImage = true;
				self.dialogImageUrl = fileList.url;
			},

			// 获取上传token
			getQiniuToken() {
				let self = this;
				API.qiniuToken().then(res => {
					self.imgData.token = res.data.uptoken;
				});
			}

		}
	}
</script>

<style>
</style>
